<template>
    <div>
      
        <div>
            <van-nav-bar
            left-text="返回"
            left-arrow
            @click-left="$router.go(-1)"
            />   
        </div>


      <el-row>               
          <el-col>
              <el-input  
              size="medium"
              placeholder="请输入内容" 
              prefix-icon="el-icon-search"
              clearable
              v-model="param"          
              >
              <template slot="append"><el-button @click="queryGoodsBy">搜索</el-button></template>
              </el-input>           
          </el-col>        
      </el-row>
      <br>
      <div :hidden="sreachH"> 
          <span>搜索历史<i class="el-icon-delete" @click="deleteSreach"></i></span>
          <p></p>
          <span><i v-for="s in sreachList" :key="s" @click="iSreach(s)">{{ s }} | </i></span>
      </div>
      
  
      <el-row :gutter="10" style="margin-left: -13px; margin-right: -5px;">
          <el-col :span="10" :offset="1" v-for="goods in goodsList" :key="goods.id">
              <template>
                          <div style="width: 165px; " :hidden="hidden">
                              
                              <el-skeleton style="width: 165px" :loading="loading" animated>
                              <template slot="template">
                                  <el-skeleton-item
                                  variant="image"
                                  style="width: 165px; height: 165px;"
                                  />
                                  <div style="padding: 14px;">
                                  <el-skeleton-item variant="h3" style="width: 50%;" />
                                  <div
                                      style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
                                  >
                                      <el-skeleton-item variant="text" style="margin-right: 16px;" />
                                      <el-skeleton-item variant="text" style="width: 30%;" />
                                  </div>
                                  </div>
                              </template>
                              <template>
                                  <el-card
                                  :body-style="{ padding: '0px', marginBottom: '1px' }"
                                  
                                  >
                                  <img
                                    :src="goods.imgUrl" 
                                    style="height: 150px;"
                                    @click="$router.push({name:'goodsInformation',query:{id:goods.id}})" 
                                  />
                                  <div style="padding: 14px;">
                                      <span>{{goods.name}}</span>
                                      <div class="bottom card-header">
                                      <span>￥：{{ goods.price }}</span>
                                      <br>
                                      <span>{{ goods.description }}</span>
                                      <br>
                                      <el-button type="text" class="button">商品详情</el-button>
                                      </div>
                                  </div>
                                  </el-card>
                              </template>
                              </el-skeleton>
                          </div>
                      </template>
          </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
import 'vant/lib/index.css'
import { NavBar } from 'vant';
export default {
    components:{
        [NavBar.name]:NavBar,
    },
      data(){
          return{
              loading:false,
              sreachH:false,
              hidden:true,
              sreachList:[],
              param:'',
              goodsList:[],
          }
      },
      methods:{
          
          querySearchHistory(){
  
              let phone = sessionStorage.getItem('phone')
              this.$axios.get('/api/app/search/searchHistory?phone='+phone)
                  .then(res => {
                      console.log(res.data)
                      if(res.data.code == 200){
                          this.sreachList = res.data.data
                      }
                  })
  
  
          },
  
          queryGoodsBy(){
  
              let phone = sessionStorage.getItem('phone')
              this.$axios.get('/api/app/goodsReception/queryGoodsByParam?param='+this.param+'&phone='+phone)
                  .then(res => {
                      console.log(res.data)
                      if(res.data.code == 200){
                          this.goodsList = res.data.data;
                          this.hidden = false;
                          this.sreachH = true;
                      }
                  })
          },
  
          iSreach(val){
              this.param = val;
              this.queryGoodsBy();
          },

        deleteSreach() {

            let phone = sessionStorage.getItem('phone')
            this.$axios.get('/api/app/search/deleteSearch?phone='+phone)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        window.location.reload()
                    }
                })

        }
          
  
          
      },
      created(){
          this.querySearchHistory();
      }
  }
  </script>
  
  <style>
  .el-icon-arrow-left{
      font-size: 20px;
  }
  .el-icon-delete{
      font-size: 16px;
      padding-left: 280px;
  }
  .el-col-offset-1 {
      margin-left: 4.16667%;
      margin: 5px 5px;
  }
  </style>